<template>
    <div style="height: 100%; position: relative">
        <el-drawer
			title="会员详情"
            :before-close="handleClose"
            :visible.sync="show_dialog"
            direction="rtl"
			size="60%;overflow-y:scroll"
            custom-class="demo-drawer"
            ref="drawer"
        >
            <div class="demo-drawer__content">
                 <div class="content-div">
                     <div>
                        <ul>
                            <li><label for="">会员名：</label><span>{{member_info.member_name}}</span></li>  
                            <li><label for="">真实姓名：</label><span>{{member_info.member_truename}}</span></li>  
                        </ul>
                        <ul>
                            <li><label for="">性别：</label><span v-show="member_info.member_sex==0">保密</span><span v-show="member_info.member_sex==1">男</span><span v-show="member_info.member_sex==2">女</span></li>  
                            <li><label for="">生日：</label><span>{{member_info.member_birthday}}</span></li>  
                        </ul>
                     </div>
                     <div>
                        <ul>
                            <li><label for="">电子邮箱：</label><span>{{member_info.member_email}}</span></li>  
                            <li><label for="">手机：</label><span>{{member_info.member_mobile}}</span></li>  
                        </ul>
                        <ul>
                            <li><label for="">阿里旺旺：</label><span>{{member_info.member_ww}}</span></li>  
                            <li><label for="">MSN：</label><span>{{member_info.member_msn}}</span></li>  
                        </ul>
                     </div>
                     <div>
                        <ul>
                            <li><label for="">是否是管理员：</label><span v-show="member_info.member_is_admin==0">否</span><span v-show="member_info.member_is_admin==1">是</span></li>  
                        </ul>
                     </div>
                     <div>
                        <ul>
                            <li><label for="">允许登录：</label><span v-show="member_info.member_state==0">否</span><span v-show="member_info.member_state==1">是</span></li>  
                            <li><label for="">登录次数：</label><span>{{member_info.member_login_num}}</span></li>  
                        </ul>  
                            
                        <ul>
                            <li><label for="">最后登录时间：</label><span>{{member_info.member_login_time}}</span></li>  
                            <li><label for="">注册时间：</label><span>{{member_info.member_time}}</span></li>  
                        </ul>
                        <ul>
                            <li><label for="">上次登录IP：</label><span>{{member_info.member_login_ip}}</span></li>  
                            <li><label for="">历史IP：</label><span>{{member_info.member_old_login_ip}}</span></li>  
                        </ul>  
                     </div>
                     <div>
                        <ul>
                            <li><label for="">可用元宝：</label><span>{{member_info.member_points}}</span></li>  
                            <li><label for="">总元宝：</label><span>{{member_info.member_total_points}}</span></li>  
                        </ul> 
                        <ul>
                            <li><label for="">可用预存款：</label><span>{{member_info.available_predeposit}}</span></li>  
                            <li><label for="">冻结预存款：</label><span>{{member_info.freeze_predeposit	}}</span></li>  
                        </ul>   
                     </div>
                     <div>
                        <ul>
                            <li><label for="">座驾数量：</label><span>{{member_info.member_cars_count_cache}}</span></li>  
                            <li><label for=""></label><span></span></li>  
                        </ul>      
                        <ul>
                            <template>
                                <el-table
                                :data="car_list"
                                style="width: 100%;font-size:0.5rem;">
                                <el-table-column
                                    prop="id"
                                    label="车辆ID"
                                    width="80">
                                </el-table-column>
                                <el-table-column
                                    prop="car_name"
                                    label="车型"
                                    width="480">
                                </el-table-column>
                                <el-table-column
                                    prop="plate_number"
                                    width="80"
                                    label="车牌号">
                                </el-table-column>
                                <el-table-column
                                    prop="store_name"
                                    label="绑定4s店">
                                </el-table-column>
                                <el-table-column
                                    prop="add_time"
                                    :formatter="dateFormat"
                                    width="100"
                                    label="购车日期">
                                </el-table-column>                                                        
                                </el-table>
                            </template>
                        </ul>  
                     </div>                                                                                                                                                                                                 
                 </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
export default {
    data() {
        return {
            loading: false,
            member_info:'',
            member_name:'',
            member_ww:'',
            member_truename:'',
            member_sex:'',
            member_birthday:'',
            member_email:'',
            member_mobile:'',
            member_phone:'',
            member_qq:'',
            member_msn:'',
            member_state:'',
            member_is_admin:'',
            member_login_num:'',
            member_time:'',
            member_login_time:'',
            member_login_ip:'',
            member_old_login_ip:'',
            member_points:'',
            member_total_points:'',
            available_predeposit:'',
            freeze_predeposit:'',
            member_cars_count_cache:'',
            car_list:[],
            formLabelWidth: '80px',
			timer: null,
			show_dialog:false,
			type:'add'
        };
    },
    
	created(){
		// console.log('created',this)
    },
    methods: {
		show_dialog_fn(id){
            this.show_dialog = true;
			if(id){
                this.$http.post('/admin/member/index.php?act=memberManage&op=detail',{member_id:id}).then((res)=> {
                    if (res.code == 1) {
                        this.member_info = res.data;
                        this.car_list = res.data.car_list;
                    }else {
                        alert(res.msg);
                    }
                }) 
			}
			
        },
        handleClose(done) {
			//done 用于关闭 Drawer
            if (this.loading) {
                return;
            }
            done();

        },     
        cancelForm() {
            this.loading = false;
			this.show_dialog = false;
            clearTimeout(this.timer);
        },
    //     fatedate(timestamp){
	    // var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
	    // var Y = date.getFullYear() + '-';
	    // var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
	    // var D = date.getDate() + ' ';
	    // return Y+M+D;    		
    // }
     dateFormat(row) {
        var timestamp = row.add_time;
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        console.log(timestamp);
	    var Y = date.getFullYear() + '-';
	    var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
	    var D = date.getDate() + ' ';
	    return Y+M+D;           
    },       
    }
};
</script>
<style lang="scss" scoped>
.el-form-item{
    margin-bottom: 0;
    width: 60%;
    .el-form-item__content{
        margin-bottom: 1px solid #D7D8DC; 

    }
}
ul{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 80px;
    padding-left: 20px;
    border-bottom: 1px dashed #eeeeee;
}
ul:hover{
    background: #f5f7fa;
}
ul>li{
    margin-right:10px;
    width: 400px;
    line-height: 45px;

}
ul>li>label{
   width: 120px;
   display: inline-block;
}
ul>li>span{
    color: #606266;
    font-size: 14px;
}
.content-div div{
    margin: 0 30px;
}
// .content-div>div{
//     // border-bottom: 1px dashed #cccccc;
// }
</style>